<template>
	<div>
		<div class="recommend-title">周末哪玩</div>
		<ul>
			<li class="item border-bottom" v-for="item in weekendList" :key="item.id">
				<div class="item-img-warpper">
					<img :src="item.imgUrl" alt="" class="item-img">
				</div>
				<div class="item-info">
					<p class="item-title">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>
				</div>
			</li>
		</ul>	
	</div>
</template>

<script>
	export default{
		name :"HomeRecommend",
		data(){
			return{
			
			}
		},
		props:{
			weekendList:Array
		}
	}
	
</script>

<style lang="stylus" scoped>
@import "~styles/mixins.styl"
	.recommend-title
		line-height .8rem
		background #eee
		text-indent .2rem
	.item-img-warpper
		overflow hidden
		height 0
		padding-bottom 33.059%
		.item-img
			width 100%
			height 2.3rem
	.item-info
		flex 1
		padding .1rem
		min-width 0			//不显示 。。。 用这种方法
		.item-title
			line-height .54rem
			fong-size .32rem
			ellipsis()
		.item-desc
			line-height .4rem
			color #ccc
			ellipsis()
</style>